<template>
  <div>
    <van-nav-bar
      title="通知详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.back()"
      @click-right="delMess"
    >
      <template #right> 删除 </template>
    </van-nav-bar>
    <div class="mess">
      <div class="title">{{ mess.title }}</div>
      <div class="data">{{ mess.create_time }}</div>
      <div class="content">{{ mess.content }}</div>
    </div>
  </div>
</template>

<script setup>
import userStore from "../../store/user";
import { useRoute, useRouter } from "vue-router";
import { ref } from "@vue/reactivity";
import { Toast, Dialog } from "vant";
import commonStore from "../../store/common";

const route = useRoute();
const id = route.params.id;
const common = commonStore();
common.userInfo.user_message_count == 0 ? common.userInfo.user_message_count = 0 : common.userInfo.user_message_count--  // 通知数量-1

const user = userStore();
const mess = ref("");
const getMessDetail = () => {
  user.getMessDetail({ id: id }).then((result) => {
    mess.value = result;
    Toast.clear();
  });
};

const router = useRouter()
const delMess = () => {
  Dialog.confirm({
    title: "提示",
    message: "您确定要删除此条通知吗",
    confirmButtonColor: '#18191a'
  })
    .then(() => {
      user.delMess({ id: id }).then(() => {
        Toast.success("删除成功");
        router.push({name: 'notice'})
      });
    })
    .catch(() => {
      return
    });
};

Toast.loading("加载中");
getMessDetail();
</script>

<style lang="scss" scoped>
.mess {
  padding-top: 50px;
  .title {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .data {
    padding: 20px;
    padding-top: 0;
    font-size: 15px;
    color: #767676;
  }
  .content {
    padding: 20px;
    padding-top: 0;
    font-size: 16px;
  }
}
</style>
